import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class FlexDirection extends Component {
  render() {
    return (
      <View style={{height: '100%'}}>
      <Text style={styles.h2}> 主轴方向 </Text>
      <ScrollView>
          <Text style={styles.h3}> FlexDirection: 'column' </Text>
          <View style={styles.container}>
              <Text style={styles.itemBase}>刘备</Text>
              <Text style={styles.itemBase}>张飞</Text>
              <Text style={styles.itemBase}>关羽</Text>
          </View>
          <Text style={styles.h3}> FlexDirection: 'column-reverse' </Text>
          <View style={[styles.container,styles.flexColumnReverse]}>
              <Text style={styles.itemBase}>刘备</Text>
              <Text style={styles.itemBase}>张飞</Text>
              <Text style={styles.itemBase}>关羽</Text>
          </View>
          <Text style={styles.h3}> FlexDirection: 'row' </Text>
          <View style={[styles.container,styles.row]}>
              <Text style={styles.itemBase}>刘备</Text>
              <Text style={styles.itemBase}>张飞</Text>
              <Text style={styles.itemBase}>关羽</Text>
          </View>
          <Text style={styles.h3}> FlexDirection: 'row-reverse' </Text>
          <View style={[styles.container,styles.rowReverse]}>
              <Text style={styles.itemBase}>刘备</Text>
              <Text style={styles.itemBase}>张飞</Text>
              <Text style={styles.itemBase}>关羽</Text>
          </View>
      </ScrollView>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container:{
      height: 150,
      margin: 10,
      borderWidth: 1,
      borderColor: '#ddd',
  },
  h2:{
    fontSize: 30,
    marginHorizontal: 10,
    marginTop: 50,
  },
  h3:{
    fontSize: 24,
    marginHorizontal: 10,
  },
  itemBase:{
    height: 30,
    borderWidth: 1,
    borderColor: 'red',
    backgroundColor: '#dfb',
    padding: 4,
    textAlign: 'center',
  },
  flexColumnReverse:{
    flexDirection: 'column-reverse',
  },
  row:{
    flexDirection: 'row',
  },
  rowReverse:{
    flexDirection: 'row-reverse',
  }
})
